<template>
	<el-container>
		<el-header>
			<div class="left-panel">
                <div class="finish">
                    <div class="finishNum">数量合计:
                        <div class="text">{{ total_stock.count }}</div>
                    </div>
                    <div class="finishNum">金额合计:
                        <div class="text">{{ total_stock.money }}</div>
                    </div>
                </div>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
                    <el-date-picker v-model="search.create_date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                    <el-input v-model="search.keyword" placeholder="请输入商品关键词" clearable @keyup.enter="upsearch"></el-input>
                    <el-select v-model="search.ware_id" filterable placeholder="请选择仓库">
                        <el-option v-for="item in wareList" :key="item.id" :label="item.ware_name" :value="item.id" />
                    </el-select>
                    <el-select v-model="search.change_type" filterable clearable multiple collapse-tags collapse-tags-tooltip max-collapse-tags="1" placeholder="请选择变动类型">
                        <el-option v-for="item in checkList" :key="item.id" :label="item.name" :value="item.value" />
                    </el-select>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					<el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe @setExtend="setExtend">
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="出/入库" prop="format_type"></el-table-column>
				<el-table-column label="类型" prop="format_operate"></el-table-column>
				<el-table-column label="单据编号" prop="order_no"></el-table-column>
				<el-table-column label="商品编号" prop="goods_code" align="center"></el-table-column>
				<el-table-column label="商品图片" align="center">
					<template #default="scope">
						<el-image v-if="scope.row.goods_image" style="width: 30px; height: 30px; border-radius: 5px;" :src="scope.row.goods_image" :preview-src-list="[scope.row.goods_image]" preview-teleported="true" hide-on-click-modal align="center"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="商品名称" prop="goods_name" align="center"></el-table-column>
				<el-table-column label="规格型号" prop="goods_spec" align="center"></el-table-column>
				<el-table-column label="商品类型" prop="cate_name" align="center"></el-table-column>
				<el-table-column label="仓库名称" prop="ware_name" align="center"></el-table-column>
				<el-table-column label="变动数量" prop="count" align="center"></el-table-column>
				<el-table-column label="单价" prop="price" align="center"></el-table-column>
				<el-table-column label="合计" prop="total_price" align="center"></el-table-column>
				<el-table-column label="变动日期" prop="create_at" align="center"></el-table-column>
				<el-table-column label="操作人" prop="user_name" align="center"></el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>

</template>

<script>
	import saveDialog from './save'

	export default {
		name: 'dept',
		components: {
			saveDialog
		},
		data() {
			return {
				dialog: {
					save: false
				},
				apiObj: this.$API.ware.check,
				selection: [],
				search: {
					ware_id: null,
                    keyword: null,
                    change_type: null,
                    create_date: null,
				},
                wareList: [],
                checkList: [],
                total_stock: {},
			}
		},
        mounted () {
            this.getWare() // 仓库;
            this.getCheck() // 变动类型;
        },
		methods: {
            setExtend(data) {
                this.total_stock = data
            },
			//表格选择后回调事件
			selectionChange(selection){
				this.selection = selection;
			},
			//搜索
			upsearch(){
				this.$refs.table.upData(this.search)
			},
			refresh(){
				for (const key in this.search) {
					this.search[key] = null;
				}
				this.$refs.table.upData(this.search)
			},
            // 获取仓库
            async getWare(){
                var res = await this.$API.goods.ware.all.get();
                this.wareList = res.data
            },
            //变动类型
            async getCheck() {
                var res = await this.$API.common.getDictData.get({
                    type: 'chage_type'
                });
                this.checkList = res.data.chage_type
            },
		}
	}
</script>

<style>
</style>
